<template>
  <div class="home">
    <div style="width: 500px; height: 500px; border: 1px solid red">
      <canvas id="three"></canvas>
    </div>
  </div>
</template>

<script>
  import * as THREE from 'three'
  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

  export default {
    mounted() {
      this.initThree()
    },
    methods: {
      initThree() {
        const scene = new THREE.Scene()
        scene.background = new THREE.Color('#eee')
        scene.fog = new THREE.Fog('#eee', 20, 100)

        const canvas = document.querySelector('#three')
        const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
        renderer.shadowMap.enabled = true

        const camera = new THREE.PerspectiveCamera(
                45,
                window.innerWidth / window.innerHeight,
                1,
                2000
        )
        camera.position.z = 15
        camera.position.y = 5
        camera.position.x = 5
        // camera.position.set( 0, 100, 0 );

        const gltfLoader = new GLTFLoader()
        gltfLoader.load('/model/gltf/DL_321.gltf', (gltf) => {
          let model = gltf.scene
          // //遍历模型每部分
          // model.traverse((o) => {
          //   //将图片作为纹理加载
          //   let explosionTexture = new THREE.TextureLoader().load(
          //           '/seraphine/textures/Mat_cwfyfr1_userboy17.bmp_diffuse.png'
          //   )
          //   //调整纹理图的方向
          //   explosionTexture.flipY = false
          //   //将纹理图生成基础网格材质(MeshBasicMaterial)
          //   const material = new THREE.MeshBasicMaterial({
          //     map: explosionTexture,
          //   })
          //   //给模型每部分上材质
          //   o.material = material
          //   if (o.isMesh) {
          //     o.castShadow = true
          //     o.receiveShadow = true
          //   }
          // })
          scene.add(model)
        })

        const lightDirect = new THREE.DirectionalLight(0xf2f2f2, 0.8);
        lightDirect.position.set(-10,30, 50);
        scene.add(lightDirect);

        let floorGeometry = new THREE.PlaneGeometry(8000, 8000)
        let floorMaterial = new THREE.MeshPhongMaterial({
          color: 0x857ebb,
          shininess: 0,
        })

        let floor = new THREE.Mesh(floorGeometry, floorMaterial)
        floor.rotation.x = -0.5 * Math.PI
        floor.receiveShadow = true
        floor.position.y = -0.001
        scene.add(floor)

        const controls = new OrbitControls(camera, renderer.domElement)
        controls.enableDamping = true

        function animate() {
          controls.update()
          renderer.render(scene, camera)
          requestAnimationFrame(animate)
          scene.rotation.y += 0.005;

          if (resizeRendererToDisplaySize(renderer)) {
            const canvas = renderer.domElement
            camera.aspect = canvas.clientWidth / canvas.clientHeight
            camera.updateProjectionMatrix()
          }
        }
        animate()

        function resizeRendererToDisplaySize(renderer) {
          const canvas = renderer.domElement
          let width = window.innerWidth
          let height = window.innerHeight
          let canvasPixelWidth = canvas.width / window.devicePixelRatio
          let canvasPixelHeight = canvas.height / window.devicePixelRatio

          const needResize =
                  canvasPixelWidth !== width || canvasPixelHeight !== height
          if (needResize) {
            renderer.setSize(width, height, false)
          }
          return needResize
        }
      },
    },
  }
</script>

<style scoped>
  .home {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #three {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
  }
</style>
